<template>
  <div class="background-container">
    <a href="attchment"></a>
    <!-- 单独给文字加链接，文字会竖着摆放
    给容器加链接，文字不会跳转 -->
    <div class="button1">
      <a href="feedback_knowledge">
        <button class="square-button1"></button>
      </a>
        <p class="item_button1">非遗勘误</p>
    </div>
    <div class="button2">
      <a href="feedback_web">
        <button class="square-button2"></button> 
      </a>
        <p class="item_button2" >网站反馈</p>
      
    </div>
  </div>
</template>

<script>
export default {
  name: 'BackgroundWithButtons',
  data() {
    return {
      buttonImageUrl: 'path/to/your/image.png', // 图片的 URL
    };
  },
}
</script>

<style scoped>
.background-container {
  /* 设置背景图片 */
  background-image: url("../../assets/feedback/feedback.png");
  /*filter: blur(20px);
  /* 确保背景图片覆盖整个容器 */
  background-size: cover;
  /* 其他样式，比如宽高、位置等 */
  background-attachment: fixed;
  position: relative;
  width: 100%;
  height: 100vh; /* 视口高度，你可以根据需要调整 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.background::before {  
  content: ""; /* 伪元素需要内容 */  
  position: absolute; /* 绝对定位，覆盖整个容器 */  
  top: 0;  
  left: 0;  
  right: 0;  
  bottom: 0;  
  background-image: url("../../assets/feedback/feedback.png");
   /* 设置背景图 */  
  background-size: cover; /* 确保背景图覆盖整个伪元素 */  
  background-position: center; /* 背景图居中 */  
  opacity: 0.1; /* 设置透明度 */  
  /* 伪元素不需要z-index，因为它默认就在内容之下 */  
}

.button1{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  
  .square-button1 {
    background-image: url("../../assets/feedback/ImageButton1.png");
    background-size: contain;
    /* 设置按钮为正方形 */
/*    width: 300px; !* 你可以根据需要调整 *!
    height: 300px; !* 与宽度相同，以保持正方形 *!
    margin-right: 200px; !* 按钮之间的间距 *!
    margin-bottom: 10px;*/
    width: 10vw; /* 你可以根据需要调整 */
    height: 10vw; /* 与宽度相同，以保持正方形 */
    margin-right: 20vw; /* 按钮之间的间距 */
    margin-bottom: 1%;
    /* 其他样式，比如颜色、边框等 */
    border-color: black;
    border-width: 0.1vw;
    border-style: solid;
    background-color: #fff;
    color: #333;
   /* border-radius: 50px; !* 稍微的圆角 *!
    font-size: 20px; !* 按钮内文本大小 *!*/
    border-radius: 20%; /* 稍微的圆角 */
    font-size: 40%; /* 按钮内文本大小 */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* 去除按钮默认样式 */
    outline: none;
  }
  .item_button1{
   /* margin-top: 5px;
    font-size: 40px;
    margin-right: 200px;*/
    margin-top: 1%;
    font-size: 1.5vw; /* 文本大小 */
    margin-right: 68%; /* 文本右边距 */
    text-align: center; /* 文本对齐方式 */
  }
}

.button2{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  .square-button2 {
    background-image: url("../../assets/feedback/ImageButton2.png");
    background-size: contain;
    /* 设置按钮为正方形 */
/*    width: 300px; !* 你可以根据需要调整 *!
    height: 300px; !* 与宽度相同，以保持正方形 *!
    margin-left: 200px; !* 按钮之间的间距 *!
    margin-bottom: 10px;*/
    width: 10vw; /* 你可以根据需要调整 */
    height: 10vw; /* 与宽度相同，以保持正方形 */
    margin-right: 5vw; /* 按钮之间的间距 */
    margin-bottom: 1%;
    /* 其他样式，比如颜色、边框等 */
    border-color: black;
    border-width: 0.1vw;
    border-style: solid;
    background-color: #fff;
    color: #333;
/*    border-radius: 50px; !* 稍微的圆角 *!
    font-size: 20px; !* 按钮内文本大小 *!*/
    border-radius: 20%; /* 稍微的圆角 */
    font-size: 40%; /* 按钮内文本大小 */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* 去除按钮默认样式 */
    outline: none;
  }
  .item_button2{
    /*margin-top: 5px;
    font-size: 40px;
    margin-left: 200px;*/
    margin-top: 1%;
    font-size: 1.5vw; /* 文本大小 */
    margin-right: 35%; /* 文本右边距 */
    text-align: center; /* 文本对齐方式 */
  }
}

</style>
